<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
      <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<base href="<%=request.getContextPath() %>/">
		<link rel="stylesheet" type="text/css" href="css/firstpage.css"/>

	<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
	
	<script src="js/firstpagejs.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/lazyload.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
			//轮播图上的类别
			$(function(){
				$('.category-item').mouseover(function(){
					$(this).css("background","red")
					/* alert("fdfdfdfd"); */
					/*  $(" .children").css("display","block")  */
					$(this).addClass('.childen')
					var value=$(this).attr("value");

					$(".children-wrapper ul li a").remove();
					$.ajax({
						type:"post",
 						url:"shouye",
 						data:"v=selectones&value="+value,
 						success:function(msg){
 						console.log(msg.length)
 						console.log(msg);  
 							var $div=$("<div>");
 							$div.addClass()
 							msg.forEach((v,i)=>{
 								$(".children-wrapper ul li").append(
 	 									"<a  class='link'>"+"<img src='imgs/chenimgs/lbotufirst.png' >"+
 	 									"<span style='margin:10px'>"+v.lname+"</span>"+"</a>"
 	 						)
 							})	
 						}
					})
					
				}).mouseout(function(){
					$(this).css("background-color","transparent");
					/* $(".children").hide(); */
				})
				$(".clearfix").mouseover(function(){
					
				})
				 $(" .clearfix").on("mouseover",function(e){e.stopPropagation();});
				$(" .category-item").on("mouseout",function(e){e.stopPropagation();});
				$(".pb-carousel li:eq(0)").addClass("pb-this");
				$(".pb-carousel-ind li:eq(0)").addClass("pb-this");
	})
	</script>
	</head>
	<body>
	<div class="my-header">
		<jsp:include page="include/header.jsp"></jsp:include>
	</div>
		<div class="linbo">
			<div class="linbo-div">
				<div class="rightli">
					<!-- 商品详细分类 -->
					  <div class="category-wrapper">
					 	<ul class="site-category-list clearfix">
					 	<c:forEach items="${sorts}" var="c">
					 		<li class="category-item" value="${c.lid }" name="lid" >
								<a  class="titlegoods" href="classpage?v=fujiallgoods&lid=${c.lid }">
									${c.lname}
									<input type="hidden" class="dds" value="${c.lid}" name="lid">
									<img src="imgs/chenimgs/righttuop.png" class="glyphicon glyphiconright">
								</a>
								 <div class="children clearfix">
									<div class="children-wrapper">
										<ul class="children-list clearfix"> 
 										<li>
					
										</li>
										</ul>
									</div>
								</div> 
							
							</li>

							</c:forEach>
									
						</ul> 
					 </div>
				</div>
				<div class="linbotwo">
					<div class="pb-carouselWarp demo1">
						<ul class="pb-carousel">
							<c:forEach var="c" items="${lblist}" >
							<li>
								<a href="spxq?cid=${c.cid}"><img src="${c.lbimg}" alt=""/></a>
							</li>
							</c:forEach>
						</ul>
						<ul class="pb-carousel-ind">
						<c:forEach var="c" items="${lblist}" >
							<li></li>
						</c:forEach>
						</ul>
						<button class="pb-arrow pb-arrow-prev"></button>
						<button class="pb-arrow pb-arrow-next" id="aa"></button>
					</div>
				
				</div>
				
			</div>
		</div>
		<div class="poster">
			
			<div class="row">
				<div class="rowes">
					<div class="row">
						<div class="rows">
							<a>
								<img class="samLazyImg" src="http://a.tbcdn.cn/mw/webapp/fav/img/grey.gif"    dataimg="imgs/chenimgs/rowone.png"  alt="">
								<p>积分商城</p>
							</a>
						</div>
						<div class="rows">
							<a>
								<img class="samLazyImg" src="http://a.tbcdn.cn/mw/webapp/fav/img/grey.gif"    dataimg="imgs/chenimgs/rowtwo.png"  alt="">
								
								<p>限时抢购</p>
							</a>
						</div>
						<div class="rows">
							<a>
							<img class="samLazyImg" src="http://a.tbcdn.cn/mw/webapp/fav/img/grey.gif"    dataimg="imgs/chenimgs/rowthree.png"  alt="">
								
								<p>领中心</p>
							</a>
						</div>
						<div class="rows">
							<a>
							<img class="samLazyImg" src="http://a.tbcdn.cn/mw/webapp/fav/img/grey.gif"    dataimg="imgs/chenimgs/rowfour.png"  alt="">
							
								<p>康佳新闻</p>
							</a>
						</div>
						<div class="rows">
							<a>
							<img class="samLazyImg" src="http://a.tbcdn.cn/mw/webapp/fav/img/grey.gif"    dataimg="imgs/chenimgs/rowfive.png"  alt="">
							
								<p>大宗采购</p>
							</a>
						</div>
						<div class="rows">
							<a>
							<img class="samLazyImg" src="http://a.tbcdn.cn/mw/webapp/fav/img/grey.gif"    dataimg="imgs/chenimgs/rowsix.png"  alt="">
								<p>加入康佳</p>
							</a>
						</div>
					</div>
				</div>
				<div class="rowes">
					<a class="lazys">
					<img class="samLazyImg" src="http://a.tbcdn.cn/mw/webapp/fav/img/grey.gif"    dataimg="imgs/chenimgs/rowesone.jpg"  alt="">
					</a>
				</div> 
				
				<div class="rowes">
					<a  class="lazys">
						<img class="samLazyImg" src="http://a.tbcdn.cn/mw/webapp/fav/img/grey.gif"    dataimg="imgs/chenimgs/rowestwo.jpg"  alt="">
					</a>
				</div> 
				
				<div class="rowes">
					<a class="lazys">
						<img class="samLazyImg" src="http://a.tbcdn.cn/mw/webapp/fav/img/grey.gif"    dataimg="imgs/chenimgs/rowesthree.jpg"  alt="">
					</a>
				</div> 
			</div>
			
			<div class="stars" id="zuinews">
				<div class="starsname">
					<h3>
						<img src="imgs/chenimgs/stars.png" >
						<a>最新产品</a>
					</h3>
				</div>
				<div class="starroll">
					<div class="row starrow">
						<c:forEach items="${listgoods}" var="c" >
						<div class="rowstars">
							<div class="starproduce">
								<span class="bgk" style="border-radius: 0px 0px 5px 5px;background-color: rgb(60, 157, 255);">新品</span>
							</div>	
								<div class="figure">
									<a href="spxq?cid=${c.cid}">
										<img class="samLazyImg" src="http://a.tbcdn.cn/mw/webapp/fav/img/grey.gif"    dataimg="${c.cmain_img}"  alt="">
									<%-- 	<img src="${c.cmain_img}" > --%>
									</a>
								</div>
								<h4 class="namess ellipsis">${c.cname}</h4>
								<%-- <div class="titles ellipsis">${c.cdescribe}</div> --%>
								<p>￥${c.sprice }</p>
						</div>
						</c:forEach>
					</div>
				</div>
			</div>
		</div>
		
		<!-- zuo'bian -->
		<div class="anchor" style="display: block;">
			<div class="container-fluid">
				<ul>
					<li >
						<a href="#zuinews">
							<span>最新产品</span>
						</a>
					</li>
					<li >
						<a href="#hotgoods">
							<span>特价产品</span>
						</a>
					</li>
					
					<li >
						<a href="#teijian">
							<span>热卖产品</span>
						</a>
					</li>
					
					<li >
						<a href="#tuijian">
							<span>推荐商品</span>
						</a>
					</li>
					
					<li ">
						<a href="#goodsone">
							<span>康佳</span>
						</a>
					</li>
					
					<li ">
						<a href="#goodstwo">
							<span>K     K     T     V   </span>
						</a>
					</li>
				</ul>
			</div>
		</div>
		
		<!-- 特价-->
		
		<div class="poster" id="hotgoods">
			
			<div class="stars">
				<div class="starsname">
					<h3>
						<img src="imgs/chenimgs/stars.png" >
						<a>特价商品</a>
					</h3>
				</div>
				<div class="starroll">
					<div class="row starrow">
						<c:forEach items="${listsgoodl}" var="c" >
						<div class="rowstars">
							<div class="starproduce">
								<span class="bgk" style="border-radius: 0px 0px 5px 5px;background-color: rgb(60, 157, 255);">新品</span>
							</div>	
								<div class="figure">
									<a href="spxq?cid=${c.cid}">
										<img class="samLazyImg" src="http://a.tbcdn.cn/mw/webapp/fav/img/grey.gif"    dataimg="${c.cmain_img}"  alt="">
									</a>
								</div>
								<h4 class="namess ellipsis">${c.cname}</h4>
							<%-- 	<div class="titles ellipsis">${c.cdescribe}</div> --%>
								<p>￥${c.sprice }</p>
						</div>
						</c:forEach>
		
					</div>
				</div>
				
			</div>
		</div>
		
		
		<!-- 热卖商品 -->
		<div class="poster" id="teijian">
			
			<div class="stars">
				<div class="starsname">
					<h3>
						<img src="imgs/chenimgs/stars.png" >
						<a>热卖商品</a>
					</h3>
				</div>
				<div class="starroll">
					<div class="row starrow">
						<c:forEach items="${listgoodst}" var="c" >
						<div class="rowstars">
							<div class="starproduce">
								<span class="bgk" style="border-radius: 0px 0px 5px 5px;background-color: rgb(60, 157, 255);">新品</span>
							</div>	
								<div class="figure">
									<a href="spxq?cid=${c.cid}">
										<img class="samLazyImg" src="http://a.tbcdn.cn/mw/webapp/fav/img/grey.gif"    dataimg="${c.cmain_img}"  alt="">
									</a>
								</div>
								<h4 class="namess ellipsis">${c.cname}</h4>
								<%-- <div class="titles ellipsis">${c.cdescribe}</div> --%>
								<p>￥${c.sprice }</p>
						</div>
						</c:forEach>
					</div>
				</div>
				
			</div>
		</div>
		
		
		
		<!-- 推荐商品 -->
		<div class="poster" id="tuijian">
			
			<div class="stars">
				<div class="starsname">
					<h3>
						<img src="imgs/chenimgs/stars.png" >
						<a>推荐商品</a>
					</h3>
				</div>
				<div class="starroll">
					<div class="row starrow">
						<c:forEach items="${listgoodso}" var="c" >
						<div class="rowstars">
							<div class="starproduce">
								<span class="bgk" style="border-radius: 0px 0px 5px 5px;background-color: rgb(60, 157, 255);">新品</span>
							</div>	
								<div class="figure">
									<a href="spxq?cid=${c.cid}">
										<img class="samLazyImg" src="http://a.tbcdn.cn/mw/webapp/fav/img/grey.gif"    dataimg="${c.cmain_img}"  alt="">
									</a>
								</div>
								<h4 class="namess ellipsis">${c.cname}</h4>
<%-- 								<div class="titles ellipsis">${c.cdescribe}</div>
 --%>								<p>￥${c.sprice }</p>
						</div>
						</c:forEach>
						
						
					</div>
				</div>
				
			</div>
		</div>
		
		
		
		<div class="poster" id="goodsone">
			
			<div class="stars">
				<div class="starsname">
					<h3>
						<img src="imgs/chenimgs/stars.png" >
						<a>康佳（KONKA）</a>
					</h3>
				</div>
				<div class="starroll">
					<div class="row starrow">
						<c:forEach items="${listbrand}" var="c" >
						<div class="rowstars">
							<div class="starproduce">
								<span class="bgk" style="border-radius: 0px 0px 5px 5px;background-color: rgb(60, 157, 255);">新品</span>
							</div>	
								<div class="figure">
									<a href="spxq?cid=${c.cid}">
										<img class="samLazyImg" src="http://a.tbcdn.cn/mw/webapp/fav/img/grey.gif"    dataimg="${c.cmain_img}"  alt="">
									</a>
								</div>
								<h4 class="namess ellipsis">${c.cname}</h4>
								<%-- <div class="titles ellipsis">${c.cdescribe}</div> --%>
								<p>￥${c.sprice }</p>
						</div>
						</c:forEach>
						
					</div>
				</div>
				
			</div>
		</div>
		
		
		
		<div class="poster" id="goodstwo">
			
			<div class="stars">
				<div class="starsname">
					<h3>
						<img src="imgs/chenimgs/stars.png" >
						<a>KKTV</a>
					</h3>
				</div>
				<div class="starroll">
					<div class="row starrow">
						<c:forEach items="${listbrandkk}" var="c" >
						<div class="rowstars">
							<div class="starproduce">
								<span class="bgk" style="border-radius: 0px 0px 5px 5px;background-color: rgb(60, 157, 255);">新品</span>
							</div>	
								<div class="figure">
									<a href="spxq?cid=${c.cid}">
										<img class="samLazyImg" src="http://a.tbcdn.cn/mw/webapp/fav/img/grey.gif"    dataimg="${c.cmain_img}"  alt="">
									</a>
								</div>
								<h4 class="namess ellipsis">${c.cname}</h4>
								<%-- <div class="titles ellipsis">${c.cdescribe}</div> --%>
								<p>￥${c.sprice }</p>
						</div>
						</c:forEach>
						
					</div>
				</div>
				
			</div>
		</div>
		<div class="my-footer">
		<jsp:include page="include/footer.jsp"></jsp:include>
		</div>
		 
		<%--  <c:import url="http://localhost:8080/Electronic/include/footer.jsp" /> --%>
		<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
		<script src="js/carousel.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/carousel.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			carousel(
				$('.linbotwo>.demo1'),	//必选， 要轮播模块(id/class/tagname均可)，必须为jQuery元素
				{
					type: 'leftright',	//可选，默认左右(leftright) - 'leftright' / 'updown' / 'fade' (左右/上下/渐隐渐现)
					arrowtype: 'move',	//可选，默认一直显示 - 'move' / 'none'	(鼠标移上显示 / 不显示 )
					autoplay: true,	//可选，默认true - true / false (开启轮播/关闭轮播)
					time:3000	//可选，默认3000
				}
			);
		</script>
	</body>
</html>
    